<template>
	<view class="page-content">
		<zm-page-navview title="私人定制" :isBack="true" :borderBottom="false" slot="top" />
		<view class="back-content">
			<view class="flex-content">
				<zm-verify-input class="pswInputV" :codeLength="4" :code="smsCode" />
				<zm-keyboard-number @keyinput="onKeysInput" @del="onKeysDel" />
			</view>
		</view>
	</view>
</template>

<script>
	import ZmVerifyInput from "zm-verify-input/components/zm-verify-input/zm-verify-input.vue"
	import ZmKeyboardNumber from "zm-keyboard-number/components/zm-keyboard-number/zm-keyboard-number.vue"
	export default {
		name:"testNode",
		components: {
			ZmVerifyInput,
			ZmKeyboardNumber
		},
		data() {
			return {
				smsCode: '12', // 验证码
				codeLength: 4,
			}
		},
		onLoad(options) {

		},
		methods: {
			// 键盘 - 监听键盘变化
			onKeysInput(item) {
				if (this.smsCode.length > this.codeLength - 1) {
					return false;
				}
				this.smsCode = this.smsCode + item.key;
			},

			// 键盘 - 点击删除按钮
			onKeysDel(item) {
				let temp = this.smsCode.split('') || [];
				temp.pop();
				this.smsCode = temp.join("");
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		width: 100vw;
		height: 100vh;
		background: #F5F9FC;

		.back-content {
			margin: 30rpx;
			padding: 30rpx;
			//  底部安全高度，顺序不要乱
			height: calc(100vh - 400rpx - constant(safe-area-inset-bottom) * 1.5 - (88rpx + var(--status-bar-height)) - 60rpx);
			height: calc(100vh - 400rpx - env(safe-area-inset-bottom) * 1.5 - (88rpx + var(--status-bar-height)) - 60rpx);
			border-radius: 20rpx;
			box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
			background: #FFFFFF;

			.flex-content {
				margin: 0rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.pswInputV {
					width: 100%;
					height: 100rpx;
					margin-top: 300rpx;
				}
			}
		}
	}
</style>
